<!--
 * @Author: chenzhinjian
 * @Description: 
 * @Date: 2019-03-26 15:09:14
 * @LastEditTime: 2019-04-08 22:31:14
 -->
<template>
    <div class="ifast-select-dropdown" :style="styles" ref="dropDown">
        <slot></slot>
    </div>
</template>
<script>
    import TransferDom from '../../directives/transfer-dom.js'
    import { getStyle } from '../../utils/dom';
    // import {Popper} from 'popper/dist/umd/popper.js'
    const Popper = require('popper.js/dist/umd/popper.js');  // eslint-disable-line

    // import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
    // placement top left right bottom auto
    export default {
        name: 'Drop',
        props: {
           placement: {
                type: String,
                default: 'bottom-start',
            },
            className: {
                type: String
            },
            paramsStr:{
                type:String,
                default:'iSelect'
            }
        },
        directives:{TransferDom},
        data () {
            return {
               width:0,
               popper:''
            };
        },
        computed: {
            styles () {
               let style = {};
                if (this.width) style.minWidth = `${this.width}px`;

                if (this.transfer) style['z-index'] = 1060 + this.tIndex;

                return style;
            }
        },
        methods: {
            updata(){
                if(this.popper){
                    this.popper.update();
                }else{
                    this.$nextTick(()=>{
                        this.popper=new Popper(this.$parent.$refs.reference,this.$el,{
                            placement: this.placement,
                            modifiers: {
                                computeStyle:{
                                    gpuAcceleration: false//如果为true，则使用CSS 3D转换来定位popper。否则，它将使用顶部和左侧属性
                                },
                                preventOverflow :{
                                    boundariesElement:'container'//
                                }
                            },
                            onCreate:()=>{
                                //创建时的回调
                                this.$nextTick(this.popper.update());

                            },
                            onUpdate:()=>{
                                // console.log('onUpdate')
                                //更新时的回调
                                // this.resetTransformOrigin();
                            }
                        })
                    })
                    
                }
                if (this.$parent.$options.name === this.paramsStr) {
                    this.width = parseInt(getStyle(this.$parent.$el, 'width'));
                }
            },
            destroy(){
                if(this.props){
                    this.props.destroy();
                    this.props=null;
                }
            }
        },
        mounted(){
        },
        created () {
            this.$on('on-update-popper', this.updata);
            // console.log('dropdown')
            this.$on('on-destroy-popper', this.destroy);
        },
        beforeDestroy () {
            if (this.popper) {
                this.popper.destroy();
            }
        }
    };
</script>
